<template>
	<view class="wrap" :class="date.status == 4 ? 'normal' : ''">
		<u-loading-page :loading="loading"></u-loading-page>
		<view class="box" v-if="!loading">
			<view class="header">
				<view class="flex">
					<u-icon name="arrow-left" color="#333333" size="24" @click="back"></u-icon>
				</view>
				<view class="title">{{date.statusName}}……</view>
				<!-- // 1.待审核 2.通过 3.驳回 4.申诉中 -->
				<image v-if="date.status > 2" src="@/static/bg_warning.png" mode=""></image>
				<image v-if="date.status == 1" src="@/static/bg_success.png" mode=""></image>
			</view>
			<view class="body">
				<view class="name">
					<view class="flex">
						<text class="tips">车辆</text>
						<text class="plate">{{vehicleInfo.plateNum || vehicleInfo.manualPlateNum}}</text>
					</view>
					<view class="type">{{vehicleInfo.typeName}}</view>
				</view>
				<view class="item">
					<view class="flex">
						<view class="gray">车牌号：</view>
						<view class="black">
							<Plate :plate="vehicleInfo.plateNum"></Plate>
						</view>
					</view>
					<view class="flex">
						<view class="gray">所有人：</view>
						<view class="black">{{vehicleInfo.owner}}</view>
					</view>
					<view class="flex">
						<view class="gray">行驶证照片：</view>
						<view class="black" @click="photoInfo(0)">
							<view>已上传</view>
							<view class="check">点击查看</view>
						</view>
					</view>
					<view class="flex">
						<view class="gray">车辆所属：</view>
						<view class="black" v-text="vehicleNatureText(vehicleInfo.vehicleNature)"></view>
					</view>
					<view class="flex">
						<view class="gray">车牌颜色：</view>
						<view class="black" v-text="vehiclePlateText(vehicleInfo.plateColour)"></view>
					</view>
					<view class="flex">
						<view class="gray">车辆类型：</view>
						<view class="black">{{vehicleInfo.typeName}}</view>
					</view>
					<view class="flex">
						<view class="gray">车辆颜色：</view>
						<view class="black" v-text="vehicleColourText(vehicleInfo.vehicleColour)"></view>
					</view>
					<view class="flex">
						<view class="gray">车辆能源类型：</view>
						<view class="black">{{vehicleInfo.vehicleEnergyType}}</view>
					</view>
					<view class="flex">
						<view class="gray">强制报废期：</view>
						<view class="black">{{vehicleInfo.validPeriod}}</view>
					</view>
					<view class="flex">
						<view class="gray">排放标准：</view>
						<view class="black">{{	vehicleInfo.emissionStandard>0?typeEmission[vehicleInfo.emissionStandard-1].dicName:'' }}</view>
					</view>
					<view class="flex">
						<view class="gray">发证机关：</view>
						<view class="black">{{vehicleInfo.issuingOrganizations}}</view>
					</view>
					<view class="flex">
						<view class="gray">车辆注册日期：</view>
						<view class="black">{{vehicleInfo.registerDate}}</view>
					</view>
					<view class="flex">
						<view class="gray">车辆识别代号：</view>
						<view class="black">{{vehicleInfo.vin}}</view>
					</view>
					<view class="flex">
						<view class="gray">车辆发证日期：</view>
						<view class="black">{{vehicleInfo.issueDate}}</view>
					</view>
				</view>
				<view class="item" v-if="vehicleInfo.rtcNo">
					<view class="flex">
						<view class="gray">道路运输证号：</view>
						<view class="black">{{vehicleInfo.rtcNo}}</view>
					</view>
					<view class="flex">
						<view class="gray">道路运输证照片：</view>
						<view class="black" @click="photoInfo(1)">
							<view>已上传</view>
							<view class="check">点击查看</view>
						</view>
					</view>
				</view>
				<view class="item" v-if="driverVehicle.length">
					<view class="flex">
						<view class="gray">已关联司机：</view>
						<view class="black list">
							<text v-for="(item, index) in driverVehicle" :key="index">{{item.name}} | {{item.mobile}}</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="flex">
						<view class="gray">申请时间：</view>
						<view class="black">{{date.auditTime}}</view>
					</view>
				</view>
				
				<view class="shade" v-if="date.status == 3">
					<view class="explain">
						<view class="left">失败说明:</view>
						<view class="right">{{date.reject}}</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="btnBox" v-if="date.status == 1">
					<view class="reject btn" @click="showReject = true">驳回</view>
					<view class="pass btn" @click="showPass = true">通过</view>
				</view>
				<view class="submit" @click="goRegister" v-if="date.status == 3">重新提交</view>
			</view>
		</view>

		<u-modal content="确定该车辆通过审核？" :show="showPass" showCancelButton closeOnClickOverlay @confirm="confirm(2)"
			@cancel="showPass = false" @close="showPass = false"></u-modal>
		<u-modal title="驳回原因" :show="showReject" closeOnClickOverlay @confirm="confirm(3)" @close="showReject = false">
			<textarea v-model="valueReject" placeholder-style="color:#A1A1A1" placeholder="请输入驳回理由,最多30个字符" maxlength="30"/>
		</u-modal>
	</view>
</template>

<script>
	import {
		vehicleInfo,
		queryDic,
		vehicleApproval
	} from '@/config/api/app.js'
	import Plate from '@/components/plate/plate.vue'
	export default {
		data() {
			return {
				loading: true,
				vehicleId: '',
				vehicleEtpId: '',
				vehicleInfo: null,
				
				// #ifdef MP-WEIXIN
				date: null, 
				// #endif
				// #ifdef APP-PLUS
				date: {},
				// #endif
				
				driverVehicle: null,
				PLATE_COLOR: [],
				VEHICLE_COLOUR: [],
				VEHICLE_NATURE: [],
				
				showPass: false,
				showReject: false,
				valueReject: '',
				typeEmission:[{'dicName':'国六',val: 1},{'dicName':'国五',val: 2},{'dicName':'国四',val: 3},{'dicName':'国三',val: 4},{'dicName':'新能源',val: 5}],
			}
		},
		async onLoad(options) {
			let info = JSON.parse(options.info)
			this.vehicleId = info.vehicleInfoId
			this.vehicleEtpId = info.vehicleEtpId
			await this.getQueryDic()
			await this.getVehicleInfo()
		},
		methods: {
			//	通过驳回
			confirm(type) {
				let params = {
					vehicleEtpId: this.vehicleEtpId,
					type: type	//	2.通过 3.驳回
				}
				if(type === 3) {
					if (!uni.$u.trim(this.valueReject)) {
						uni.$u.toast("请先输入驳回理由");
						return
					}
					params.reject = this.valueReject
				}
				vehicleApproval({
					params: params
				}).then(res => {
					console.log(res)
					if (res.code != 0) {
						uni.$u.toast(res.msg);
					} else {
						if(type === 3) {
							this.showReject = false
							uni.$u.toast("驳回成功")
						}
						if(type === 2) {
							this.showPass = false
							uni.$u.toast("审核通过")
						}
						setTimeout(() => {
							uni.navigateBack()
						}, 600)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//	车辆信息
			getVehicleInfo() {
				let params = {
					vehicleId: this.vehicleId
				}
				vehicleInfo({
					params: params
				}).then((res) => {
					if (res.code == 0) {
						console.log(res.data)
						this.loading = false
						this.vehicleInfo = res.data.vehicleInfo
						this.date = res.data.dateMap
						this.driverVehicle = res.data.driverVehicle
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//	字典查询: 车轴 AXLE / 车牌颜色 PLATE_COLOR / 车辆颜色 VEHICLE_COLOUR / 车辆性质 VEHICLE_NATURE / 车辆类型 VAN_TYPE TRACTOR_TYPE
			getQueryDic() {
				queryDic(['VAN_TYPE', 'TRACTOR_TYPE', 'PLATE_COLOR', 'VEHICLE_COLOUR', 'VEHICLE_NATURE', 'AXLE'], {
					custom: {
						// title: '字典查询中……'
					}
				}).then(res => {
					console.log(res)
					if (res.code != 0) {
						uni.$u.toast(res.msg);
					} else {
						this.VEHICLE_NATURE = res.data.VEHICLE_NATURE
						this.VEHICLE_COLOUR = res.data.VEHICLE_COLOUR
						this.PLATE_COLOR = res.data.PLATE_COLOR
					}
				}).catch(err => {
					console.log(err)
				})
			},
			photoInfo(num) {
				// 0是行驶证， 1道路运输证
				const {
					drivingLicense,
					vehicleLicenseDeputy,
					rtc,
					rtcDeputy
				} = this.vehicleInfo
				let urls = []
				if (num === 0) {
					if(drivingLicense) urls.push(drivingLicense)
					if(vehicleLicenseDeputy) urls.push(vehicleLicenseDeputy)
				}
				if (num === 1) {
					if(rtc) urls.push(rtc)
					if(rtcDeputy) urls.push(rtcDeputy)
				}
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: urls,
					success: () => {
						console.log('图片展示成功')
					}
				})
			},
			//	车辆颜色文字
			vehicleColourText(type) {
				if (!type) {
					return
				}
				let array = this.VEHICLE_COLOUR.filter(item => {
					return item.dicValue == type
				})
				return array[0].dicName
			},
			//	车牌颜色文字
			vehiclePlateText(type) {
				if (!type) {
					return
				}
				let array = this.PLATE_COLOR.filter(item => {
					return item.dicValue == type
				})
				console.log(type,array[0].dicName)
				return array[0].dicName
			},
			//	车辆类型文字
			vehicleNatureText(type) {
				if (!type) {
					return
				}
				let array = this.VEHICLE_NATURE.filter(item => {
					return item.dicValue == type
				})
				return array[0].dicName
			},
			back() {
				uni.navigateBack()
			},
			goRegister() {
				uni.navigateTo({
					url: `/pages/vehicle/register?id=${this.vehicleId}`
				})
			}
		},
		components: {
			Plate
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}
	textarea{
		background: #F6F6F6;
		border-radius: 8rpx;
		padding: 24rpx;
	}
	.wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 0 calc(128rpx + env(safe-area-inset-bottom));
		&.normal{
			padding: 0 0 calc(env(safe-area-inset-bottom));
		}
		.box{
			width: 100%;
			height: 100%;
			overflow: auto;
			box-sizing: border-box;
			padding: 0 32rpx;
		}
	}

	.footer {
		position: absolute;
		left: 32rpx;
		bottom: calc(24rpx + env(safe-area-inset-bottom));
		width: calc(100% - 64rpx);
		box-sizing: border-box;

		.btnBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn {
			font-size: 30rpx;
			font-weight: 500;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			box-shadow: 0 0 20rpx 12rpx rgba(0, 62, 129, 0.04);
		}

		.submit {
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			background: linear-gradient(to right, #4d83b9, #003E81);
		}

		.reject {
			color: #333333;
			width: 40%;
			background: #fff;
		}

		.pass {
			width: 55%;
			color: #FFFFFF;
			background: linear-gradient(to right, #4d83b9, #003E81);
		}
	}

	.body {
		background: #FFFFFF;
		box-shadow: 0 0 20rpx 12rpx rgba(0, 62, 129, 0.04);
		border-radius: 8rpx;
		padding: 24rpx;
		margin-bottom: 32rpx;
		position: relative;
		.shade{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(255,255,255,0.8);
			border-radius: 8rpx;
			padding: 24rpx;
			.explain{
				display: flex;
				font-size: 28rpx;
				line-height: 32rpx;
				font-weight: 500;
				background: #FFFFFF;
				box-shadow: 0 0 20rpx 0 rgba(141,9,12,0.17);
				border-radius: 8rpx;
				margin-top: 130rpx;
				padding: 24rpx;
				.left{
					color: #9E9E9E;
					width: 130rpx;
					margin-right: 24rpx;
				}
				.right{
					color: #333333;
					flex: 1;
				}
			}
			
		}
		.item {
			border-top: 1rpx solid #F5F7FB;
			padding: 12rpx 0;

			.flex {
				display: flex;
				padding: 16rpx 0;
				font-size: 30rpx;
			}

			.gray {
				width: 45%;
				font-weight: 400;
				color: #9E9E9E;
			}

			.black {
				width: 55%;
				font-weight: 500;
				color: #333333;
				display: flex;

				&.list {
					flex-direction: column;

					text {
						margin-top: 12rpx;

						&:first-child {
							margin-top: 0;
						}
					}
				}

				.check {
					font-size: 22rpx;
					font-weight: 500;
					color: #003E81;
					padding: 5rpx 10rpx;
					background: #F0F7FF;
					margin-left: 12rpx;
				}
			}
		}

		.name {
			margin-bottom: 24rpx;

			.flex {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			.tips {
				font-size: 22rpx;
				font-weight: 500;
				color: #E46F39;
				margin-right: 12rpx;
				padding: 6rpx 10rpx;
				background: #FFEBE1;
			}

			.plate {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}

			.type {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				line-height: 44rpx;
				margin-top: 20rpx;
			}
		}
	}

	.header {
		box-sizing: border-box;
		padding: 100rpx 0 32rpx;
		position: relative;

		.flex {
			display: flex;
			align-items: center;
		}

		.title {
			font-size: 68rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 24rpx;
		}

		image {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 386rpx;
			height: 226rpx;
			zoom: .8;
		}
	}
</style>
